{extend name="pc/admin/layout"/}
{block name="main"}
   <div class="g-1400 g-container" id="pjax-container">
        
<div class="bg-bai b rx3" id="vue-page">
    <div class="t-v t-t">
        <div class="c-sidebar c-sidebar-h pb5 br">
            <div class="c-sidebar-title t-v hui bb">福利配置</div>
            <ul class="c-nav click-nav">
                <li><a href="{:url('pc/admin',['act'=>'other','s'=>'jfdh'])}" class="t-v" data-pjax>
                    <div><i class="icon icon-form"></i></div>
                    <div>积分兑换设置</div>
                </a></li>
				<li><a href="{:url('pc/admin',['act'=>'other','s'=>'qd'])}" class="t-v" data-pjax>
                    <div><i class="icon icon-form"></i></div>
                    <div>每日签到设置</div>
                </a></li>
				<li class="active"><a href="{:url('pc/admin',['act'=>'other','s'=>'cj'])}" class="t-v" data-pjax>
                    <div><i class="icon icon-form"></i></div>
                    <div>抽奖商品设置</div>
                </a></li>
				<li><a href="{:url('pc/admin',['act'=>'other','s'=>'cjset'])}" class="t-v" data-pjax>
                    <div><i class="icon icon-form"></i></div>
                    <div>抽奖规则设置</div>
                </a></li>
            </ul>
        </div>
<div class="c-content bl">
	<form id="form-config">
            <div class="col-6 fl br" style="min-height:420px;">
                <div class="g-title t-v pl4 bb">
                    <div class="col-12 h t-v bold">商品设置</div>
                </div>
				<div class="p5 o-h">
					<div class="pt1 pb3 in-text">
						<dt class="bold bb pr2 lan">商品类型</dt>
						<dd><select class="form w h8 bb" name="type">
							<option value="1">VIP会员</option>
							<option value="2">挂机配额</option>
							<option value="3">账户余额</option>
							<option value="4">秒赞代理</option>
							<option value="5">未中奖</option>
						</select></dd>
					</div>
					<div class="pt1 pb3 in-text">
						<dt class="bold bb pr2 lan">中奖几率</dt>
						<dd><input class="form w h8 bb" type="number" name="num"></dd>
					</div>
					<div class="pt1 pb3 in-text">
						<dt class="ml4 f3 hui">填1就是百分之1,假设所有商品中奖几率总和为百分之10那剩下百分之90可以分配添加未中奖商品</dt>
					</div>
					<div id="frame_set" style="display:inherit">
                            <div class="pt1 pb3 in-text">
								<dt class="bold bb pr2 lan">VIP会员天数</dt>
								<dd><input class="form w h8 bb" name="vip"></dd>
							</div>
                    </div>
					<div id="frame_set2" style="display:inherit">
                            <div class="pt1 pb3 in-text">
								<dt class="bold bb pr2 lan">挂机配额个数</dt>
								<dd><input class="form w h8 bb" name="peie"></dd>
							</div>
                    </div>
					<div id="frame_set3" style="display:inherit">
                            <div class="pt1 pb3 in-text">
								<dt class="bold bb pr2 lan">余额面值</dt>
								<dd><input class="form w h8 bb" name="money"></dd>
							</div>
                    </div>
					<div id="frame_set4" style="display:inherit">
						<div class="pt1 pb3 in-text">
                            <dt class="bold bb pr2 lan">代理等级</dt>
							<dd><select class="form w h8 bb" name="dl">
								<option value="1">银牌代理</option>
								<option value="2">金牌代理</option>
								<option value="3">钻石代理</option>
							</select></dd>
						</div>
					</div>
					<div class="g-content t-c p5 pt10 qdhtmlbtn">
						<button type="button" class="btn btn-qing btn-md w22 rx1" @click="add()">添 加 奖 项</button>
					</div>
				</div>
            </div>
			</form>
            <div class="col-6 fl bl" style="margin-left:-1px;">
                <div class="g-title t-v pl4 bb">
                    <div class="col-12 h t-v bold">奖品列表</div>
                </div>
				<table class="table table-hover">
                        <thead class="table-info">
                        <tr>
                            <th class="text-center">奖品名称</th>
                            <th class="text-center">中奖几率</th>
                            <th class="text-center">奖品类型</th>
                            <th class="text-center">奖励面值</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="row in list" align="center">
                            <td class="text-center">{{row.name}}</td>
                            <td class="text-center">{{row.v}}%</td>
                            <td v-if="row.type === 1" class="text-center">VIP会员</td>
                            <td v-else-if="row.type === 2" class="text-center">挂机配额</td>
                            <td v-else-if="row.type === 3" class="text-center">账户余额</td>
                            <td v-else-if="row.type === 4" class="text-center">秒赞代理</td>
                            <td v-else class="text-center">未中奖</td>
                            <td v-if="row.type === 1" class="text-center">{{row.value}}天</td>
                            <td v-else-if="row.type === 2" class="text-center">{{row.value}}个</td>
                            <td v-else-if="row.type === 3" class="text-center">{{row.value}}元</td>
                            <td v-else class="text-center">{{row.name}}</td>
                            <td class="text-center"><a @click="del(row.id)" >删除</a></td>
                        </tr>
                        <tr>
                        </tbody>
                    </table>
            </div>
        </div>
</div>
<div class="c-pagination o-h t-v">
        <div class="c-sidebar"></div>
        <div class="c-content h11 o-h g-btn t-v bt bl">
		<div class="col-12 h no g-btn g-minhide t-v t-r">
			<pagination ref="pagination" :total="total" :current_page="search.page" :page_size="search.pageSize"
                            @page-phange="pageChange"></pagination>
        </div>
		</div>
    </div>
</div>

    </div>
   {/block}
   {block name='foot'}
	<script>
        new Vue({
            el: '#vue-page',
            data: {
                search: {
                    page: 1,
                    pageSize: 10,
                },
                total: 0,
                list: []
            },
            methods: {
                pageChange: function (p) {
                    this.search.page = p;
                    this.loadList();
                },
                loadList: function () {
                    this.$refs.pagination.setCurrent(this.search.page);// 改变页码
                    var vue = this;
                    app.ajax("{:url('AdminAjax/prizes',['action'=>'list'])}", this.search, function (data) {
                        if (data.code === 0) {
                            vue.total = data.total;
                            vue.list = data.list;
                        } else {
                            x.msg(data.message);
                        }
                    })
                },
                del: function (id) {
                    if (!confirm('确认要删除该奖品吗?')) return;
                    var vue = this;
                    app.ajax("{:url('AdminAjax/prizes',['action'=>'del'])}", {id: id}, function (data) {
                        if (data.code === 0) {
                            vue.loadList();
                            x.msg(data.message)
                        } else {
                            x.msg(data.message)
                        }
                    })
                },
                add: function () {
                    var vue = this;
                    app.ajax("{:url('AdminAjax/prizes',['action'=>'add'])}", $("#form-config").serialize(), function (data) {
                        vue.loadList();
                        x.msg(data.message);
                    })
                }
            },
            mounted: function () {
                this.loadList();
            }
        });
        $("select[name='type']").change(function () {
            if ($(this).val() == 1) {
                $("#frame_set").css("display", "inherit");
                $("#frame_set2").css("display", "none");
                $("#frame_set3").css("display", "none");
                $("#frame_set5").css("display", "none");
                $("#frame_set4").css("display", "none")
            } else if ($(this).val() == 2) {
                $("#frame_set").css("display", "none");
                $("#frame_set2").css("display", "inherit");
                $("#frame_set3").css("display", "none");
                $("#frame_set4").css("display", "none");
                $("#frame_set5").css("display", "none");
            } else if ($(this).val() == 3) {
                $("#frame_set").css("display", "none");
                $("#frame_set2").css("display", "none");
                $("#frame_set3").css("display", "inherit");
                $("#frame_set4").css("display", "none");
                $("#frame_set5").css("display", "none");
            } else if ($(this).val() == 4) {
                $("#frame_set").css("display", "none");
                $("#frame_set2").css("display", "none");
                $("#frame_set3").css("display", "none");
                $("#frame_set4").css("display", "inherit");
                $("#frame_set5").css("display", "none");
            } else {
                $("#frame_set").css("display", "none");
                $("#frame_set2").css("display", "none");
                $("#frame_set3").css("display", "none");
                $("#frame_set4").css("display", "none");
                $("#frame_set5").css("display", "inherit");
            }
        });
        $("#frame_set").css("display", "inherit");
		$("#frame_set2").css("display", "none");
		$("#frame_set3").css("display", "none");
		$("#frame_set5").css("display", "none");
		$("#frame_set4").css("display", "none");
    </script>
    {/block}